import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

//通过路由降级 解决原地跳转报错问题
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location) {
  return originalPush.call(this, location).catch(err => { })
};


const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    children: [{
      path: '/home/searchpopup',
      component: () => import(/* webpackChunkName: "searchpopup" */ '../views/SearchPopup.vue')
    },],
    meta: {
      num: 0,
      //判断Tabbar是否显示 在顶级组件App.vue中 <AppTabbar v-show='$route.meta.isShowAppTabbar'/>
      isShowAppTabbar:true
    }
  },
  {
    path: '/label',
    name: 'label',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "label" */ '../views/Label.vue')
    ,
    meta: {
      num: 1,
      //判断Tabbar是否显示 在顶级组件App.vue中 <AppTabbar v-show='$route.meta.isShowAppTabbar'/>
      isShowAppTabbar:true
    }
  },
  {
    path: '/apps',
    name: 'apps',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "apps" */ '../views/Apps.vue')
    ,
    children: [{
      path: '/apps/searchpopup',
      component: () => import(/* webpackChunkName: "searchpopup" */ '../views/SearchPopup.vue')
    }],
    meta: {
      num: 2,
      //判断Tabbar是否显示 在顶级组件App.vue中 <AppTabbar v-show='$route.meta.isShowAppTabbar'/>
      isShowAppTabbar:true
    }
  },
  {
    path: '/cart',
    name: 'cart',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "cart" */ '../views/Cart.vue')
    ,
    meta: {
      num: 3,
      //判断Tabbar是否显示 在顶级组件App.vue中 <AppTabbar v-show='$route.meta.isShowAppTabbar'/>
      isShowAppTabbar:true
    }
  },
  {
    path: '/user',
    name: 'user',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "user" */ '../views/User.vue')
    ,
    meta: {
      num: 4,
      //判断Tabbar是否显示 在顶级组件App.vue中 <AppTabbar v-show='$route.meta.isShowAppTabbar'/>
      isShowAppTabbar:true
    }
  },
  {
    path: '/productDetail',
    name: 'productDetail',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "productDetail" */ '../views/ProductDetail.vue'),
    meta: {
      //判断Tabbar是否显示 在顶级组件App.vue中 <AppTabbar v-show='$route.meta.isShowAppTabbar'/>
      isShowAppTabbar:false
    }
  },
  {
    path: '/channel',
    name: 'channel',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "Channel" */ '../views/Channel.vue'),
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})


//使用前置导航守卫实现路由拦截,通过对localStorage中token的判断，检测用户的状态，并实现页面状态控制
//路由守卫 / 路由拦截  
router.beforeEach((to, from, next) => {
  //什么时候执行这个函数？在每一次跳转路由之前，执行这里的代码

  //要实现的效果：点击购物车，如果用户已经登录，就直接放行。如果没有登录，要跳转到'/user'页面
  if (to.path === '/cart') {
    //判断有没有登录。即 获取token，如果有token就放行
    let token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      //拿不到token，就表示没有登录，要跳转到user页面
      Vue.prototype.$toast('请先登录！');
      setTimeout(() => {
        next('/user')     
      }, 800);
    }
    return
  }
  next()  //必须调用next，才能跳转到想要去的页面。没有调用next，就无法跳转页面
})
export default router
